<template>
  <view class="wrap" style="background-color: #fff;min-height: 100vh;">
    <u-toast ref="uToast" />
    <view class="top bgff paddLR" style="border-bottom: 1px solid #eee;">
      <view class=" u-p-t-20 ">
        <view class="search u-flex u-col-center">
          <view class="u-font-20" @click="openCancard">
            <view>
              <text class="u-tips-color">住</text>
              <text class="u-type-primary b u-m-l-10">{{startDate}}</text>
            </view>
            <view>
              <text class="u-tips-color">离</text>
              <text class="u-type-primary b u-m-l-10">{{endDate}}</text>
            </view>
          </view>
          <view class="u-type-primary b u-m-l-10">{{dayNum}}晚</view>
          <view class="line"></view>
          <u-icon name="search"></u-icon>
          <u-input class="u-m-l-10" height="80" v-model="payload.label" confirm-type="搜索" @confirm="getList(true)"
            placeholder="请输入酒店名称/酒店标签"></u-input>
        </view>
      </view>
      <view class="shaix u-flex u-col-center u-row-around">
        <view class="item" @click="showRank = !showRank">
          <text class="u-m-r-10">{{rankStr}}</text>
          <u-icon name="arrow-down-fill" size="16" color="#999"></u-icon>
        </view>
        <!-- <view class="item" @click="paixu1 = !paixu1">
          <text class="u-m-r-10">位置区域</text>
          <u-icon name="arrow-down-fill" size="16" color="#999"></u-icon>
        </view>
        <view class="item" @click="paixu1 = !paixu1">
          <text class="u-m-r-10">价格/星级</text>
          <u-icon name="arrow-down-fill" size="16" color="#999"></u-icon>
        </view> -->
        <view class="item" @click="showPrice = !showPrice">
          <text class="u-m-r-10">筛选</text>
          <u-icon name="arrow-down-fill" size="16" color="#999"></u-icon>
        </view>
      </view>
    </view>
    <view class="topH"></view>
    <!-- <view v-if="false" class="tag-list">
      <view class="tag-item">4.5分以上</view>
      <view class="tag-item">民宿</view>
      <view class="tag-item">含早餐</view>
      <view class="tag-item">双床房</view>
      <view class="tag-item">大床房</view>
    </view> -->
    <view style="overflow:hidden;margin:0 10rpx;box-sizing: border-box;background-color:#fff;">
      <hotel-item 
        v-for="(item,index) in dataSource" 
        :key="index"
        :hotel-id="item.id"
        :image="item.image"
        :name="item.famous_hotel_title"
        :distance="item.distance"
        :label="getLabs(item.label)"
        :subtitle="item.subtitle"
        :price="item.price"
        :start="payload.start"
        :end="payload.end_time"
        :type="2"
      />
      <zj-empty v-if="dataSource.length === 0" top="15vh">
      </zj-empty>
    </view>
    <!-- 排序 -->
    <u-popup :top="200" v-model="showRank" mode="top" border-radius="14" class="pup">
      <view class="paddLR u-p-t-0 u-p-b-20">
        <view :class="{ 'u-type-primary': payload.distance === '' && payload.commentNum === '' && payload.price === ''  }"
          class="item4 u-flex u-row-between" @click="chooseRank(null)">
          智能排序
          <u-icon name="checkmark" color="#2979ff" v-if="payload.distance === '' && payload.commentNum === '' && payload.price === ''"></u-icon>
        </view>
        <view :class="{ 'u-type-primary': payload[item.prop] === item.value }" v-for="(item, i) in rank_sort_dict" :key="i"
          class="item4 u-flex u-row-between" @click="chooseRank(item)">
          {{item.label}}
          <u-icon name="checkmark" color="#2979ff" v-if="payload[item.prop] === item.value"></u-icon>
        </view>
      </view>
    </u-popup>
    <!-- 筛选 -->
    <u-popup :top="200" v-model="showPrice" mode="top" border-radius="14" class="pup">
      <view class="paddLR price u-p-t-20 u-p-b-40 u-flex u-col-center u-row-between u-font-26 u-flex-wrap">
        <view v-for="item in price_range_dict" :key="item.value" class="item1" @click="choosePrice(item.value)"
          :class="{'u-type-primary': payload.priceRange === item.value}">￥{{item.label}}</view>
      </view>
    </u-popup>

    <!-- 优惠券 -->
    <!-- <u-popup v-model="yhqShow" mode="bottom" border-radius="14" class="pup">
      <view class="u-p-20">
        <view class="tit u-text-center u-p-10">优惠提醒</view>
        <view class="u-flex u-col-center u-row-between">
          <text class="u-tips-color">红包</text>
          <view class="u-flex-1"></view>
          <u-button type="error" plain size="mini" class="custom-style">一键领取</u-button>
        </view>

        <scroll-view class="list u-m-t-30" style="height: calc(60vh - 100rpx);" :scroll-y="true">
          <view class="item u-m-b-20" v-for="item in 6">
            <view class="u-flex ">
              <view class="le u-m-l-10 u-text-center">
                <view class="u-flex u-text-bottom b u-error u-line-1">
                  <text class="u-font-20">￥</text>
                  <text class="u-font-40">16</text>
                </view>
                <view class="type u-m-t-6">最高5</view>
              </view>
              <view class="mid u-m-l-30 u-flex-1">
                <view class="ri b u-font-28rpx">优惠券名称</view>
                <view class="u-tips-color u-m-t-10 u-flex u-col-center u-row-between">
                  <text>有效期截至 2025</text>
                  <view class="btn u-flex u-col-center u-row-center" @click="yhqShow = false">去使用</view>
                </view>
              </view>
            </view>
            <view class="bot">
              仅用于带有【可用券】标签的酒店
            </view>
          </view>
        </scroll-view>
      </view>
    </u-popup> -->
    <!-- 日历 -->
    <zb-calendar type="range" ref="calendar" :disabledDate="disabledDate" v-model="dateRange" @input="updateDate"></zb-calendar>
    <!-- 底部导航 -->
    <fa-tabbar></fa-tabbar>
  </view>
</template>

<style lang="scss" scoped>
  .tag-list {
    background-color: #fff;
    padding: 20rpx 30rpx;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    .tag-item {
      height: 54rpx;
      line-height: 54rpx;
      padding: 0 14rpx;
      background: #F5F6FA;
      border-radius: 8rpx;
      color: #3C3D3E;
      font-size: 24rpx;
      margin-left: 20rpx;
      &:first-child {
        margin-left: 0;
      }
    }
  }
  .search {
    border: 1px solid $u-type-primary;
    border-radius: 60rpx;
    padding: 0 20rpx;

    .line {
      width: 1px;
      height: 40rpx;
      background-color: #dedede;
      margin: 0 20rpx;
    }
  }

  .yhq {
    background-color: #fff7ee;
    padding-top: 20rpx;
    padding-bottom: 20rpx;

    .item {
      background-color: #fff;
      padding-right: 10px;
      margin-right: 16rpx;
      border: 1px solid $u-type-error;
      height: 40rpx;
      color: $u-type-error;
      font-size: 18rpx;
    }

    .p {
      background-color: $u-type-error;
      color: #fff;
      padding: 0 10rpx;
      text-align: center;
      position: relative;
      height: 40rpx;
      margin-right: 16rpx;

      &::after {
        content: '';
        display: block;
        width: 0px;
        height: 0px;
        border: 10rpx solid transparent;
        border-right: none;
        border-top: none;
        border-left-color: $u-type-error;
        border-bottom-width: 40rpx;
        position: absolute;
        left: 100%;
        top: 0;
      }

    }

    .rd {
      width: 36rpx;
      height: 36rpx;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      background-color: $u-type-error;
    }

    background-color: #fef8f7;
  }

  .pup {
    .type {
      font-size: 18rpx;
      padding: 4rpx 16rpx;
      background-color: #ffc8b4;
      border-radius: 10rpx;
    }

    .btn {
      width: 130rpx;
      height: 50rpx;
      border-radius: 40rpx;
      border: 1px solid $u-type-error ;
      color: $u-type-error;
      font-size: 18rpx;
    }

    .item {
      padding: 20rpx;
      padding-bottom: 0;
      background-color: #fef8f7;
      border-radius: 10rpx;
      border: 1px solid #fdd9da;
    }

    .bot {
      border-top: 1px dashed #ddd;
      margin: 20rpx -20rpx 0;
      padding: 20rpx;
      color: #666;
    }
  }

  .top {
    position: fixed;
    top: 0;
    z-index: 99999;
    width: 100%;
  }

  .topH,
  .top {
    height: 200rpx;
  }

  .shaix {
    line-height: 100rpx;

  }

  .item4 {
    line-height: 80rpx;
  }

  .price {
    .item1 {
      width: 30%;
      background-color: #f5f5f5;
      border-radius: 10rpx;
      line-height: 60rpx;
      margin-bottom: 16rpx;
      text-align: center;
    }
  }
</style>

<script>
  const app = getApp();
  import moment from 'moment/moment';
  import { rank_sort_dict, price_range_dict } from '@/utils/dict.js';
  
  export default {
    data() {
      return {
        payload: {},
        locate: {},
        page: 1,
        total: 0,
        dataSource: [],
        showRank: false,
        showPrice: false,
        rank_sort_dict,
        price_range_dict,
        dateRange: [], // 日期
        disabledDate(item) {
          const val = new Date(item).getTime();
          const cur = Date.now() - 24 * 60 * 60 * 1000;
          if (val < cur) {
            return true
          }
          return false;
        },
      }
    },
    computed: {
      startDate() {
        return this.dateRange[0] ? moment(this.dateRange[0]).format('MM月DD日') : '-'
      },
      endDate() {
        return this.dateRange[1] ? moment(this.dateRange[1]).format('MM月DD日') : '-'
      },
      dayNum() {
        if (this.dateRange.length !== 2) {
          return 0
        }
        const [start, end] = this.dateRange
        const distance = new Date(end).getTime() - new Date(start).getTime()
        return distance / (24 * 3600 * 1000)
      },
      rankStr() {
        const target = this.rank_sort_dict.find(v => this.payload[v.prop] === v.value)
        return target?.label || '智能排序'
      }
    },
    onLoad() {
      // #ifdef MP-WEIXIN
      uni.hideHomeButton()
      // #endif
      // this.payload = {
      //   ...this.payload,
      //   ...res
      // }
    },
    onReady() {
      let systemInfo = uni.getSystemInfoSync()
      let height = systemInfo.platform == 'ios' ? 44 : 48;
    },
    onShow() {
      this.payload = app.globalData.hotelPayload
      this.locate = app.globalData.locate
      this.dateRange = [this.payload.start, this.payload.end_time]
      this.getList()
    },
    onShareAppMessage() {
      return {
        title: '',
        path: '/pages/index/index',
      }
    },
    onReachBottom() {
      if (this.dataSource.length > 0 && this.dataSource.length === this.total) {
        uni.showToast({
          icon: 'none',
          title: '已加载全部数据'
        })
      } else {
        this.getList(this.dataSource.length === 0 ? true : false)
      }
    },
    methods: {
      getLabs(e){
        return e.split(',')
      },
      // 选择排序
      chooseRank(e = null) {
        const props = ['distance', 'commentNum', 'price']
        props.forEach(item => {
          if (e && item === e.prop) {
            this.payload[item] = e.value
          } else {
            this.payload[item] = ''
          }
        })
        this.showRank = false
        this.getList()
      },
      // 选择价格区间
      choosePrice(e) {
        this.payload.priceRange = e
        this.showPrice = false
        this.getList()
      },
      // 打开日历
      openCancard() {
        this.$refs.calendar.open()
      },
      // 更新日期
      updateDate() {
        this.payload.start = this.dateRange[0]
        this.payload.end_time = this.dateRange[1]
        console.log(app.globalData.hotelPayload)
        this.getList()
      },
      // 热门排序
      getShaiData(e, name) {
        console.log('1111')
        this.formData[name] = e;
        this.paixu1 = false;
        this.paixu2 = false;
        this.getList()
      },
      // 展现优惠券
      getYhq() {
        this.yhqShow = !this.yhqShow
      },
      // 获取数据列表
      getList(reset = true) {
        if (reset) {
          this.page = 1
          this.dataSource = []
          this.total = 0
        } else {
          this.page += 1
        }
        uni.showLoading({
          mask: true,
          title: '加载中'
        })
        this.$api.searchFamousLodgingApi({
          ...this.payload,
          ...this.locate,
          page: this.page
        }).then(res => {
          uni.hideLoading()
          if(res.code === 0){
            this.$refs.uToast.show({ title: res.msg })
          }else{
            const {  data, total } = res.data
            this.dataSource.push(...data)
            this.total = total
          }
          
        }).catch(() => {
          uni.hideLoading()
        })
      }
    }
  }
</script>